<template>
  <div v-if="eventList.length" class="game_event gl_mb_10">
    <div class="model_title">竞赛项目</div>
    <div class="event_content model_content">
      <van-collapse v-model="activeName">
        <van-collapse-item v-for="item in eventList" :key="item.id" :name="item.id" :title="item.name">
          <div class="event_group">
            <div v-for="jtem in item.eventGroups" :key="jtem.id" class="event_group_item">
              <div class="title">
                {{ jtem.name }} ({{ jtem.startBirthDate && jtem.startBirthDate.substring(0, 10).replace(/-/g, '/') }} - {{ jtem.endBirthDate && jtem.endBirthDate.substring(0, 10).replace(/-/g, '/') }})
              </div>
              <div class="event_group_content gl_clear">
                <template v-if="jtem.events.length && (jtem.events[0].genderCode === 'M' || jtem.events[0].genderCode === 'W')">
                  <div class="gl_fl label_name">
                    <span class="event_item_name">男子组：</span>
                  </div>
                  <div class="gl_fl label_content">
                    <template v-for="ktem in jtem.events">
                      <span v-if="ktem.genderCode === 'M' && ktem.name" :key="ktem.id" class="event_item">
                        {{ ktem.name }}
                      </span>
                    </template>
                  </div>
                  <div class="gl_clear" />
                  <div class="gl_fl label_name">
                    <span class="event_item_name">女子组：</span>
                  </div>
                  <div class="gl_fl label_content">
                    <template v-for="ktem in jtem.events">
                      <span v-if="ktem.genderCode === 'W' && ktem.name" :key="ktem.id" class="event_item">{{ ktem.name }}</span>
                    </template>
                  </div>
                </template>
                <template v-else>
                  <div class="gl_clear" />
                  <div class="gl_fl label_name">
                    <span class="event_item_name">具体级别：</span>
                  </div>
                  <div class="gl_fl label_content">
                    <template v-for="ktem in jtem.events">
                      <span v-if="ktem.name" :key="ktem.id" class="event_item">{{ ktem.name }}</span>
                    </template>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script>
import {
  api_GET_EventsManagementCategory
} from '@/extend/api/gameswaggerApi/app';
export default {
  name: 'Event',
  props: {
    gameId: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      activeName: [],
      eventList: []
    };
  },
  watch: {
    gameId() {
      this.getEventList();
    }
  },
  created() {
    this.getEventList();
  },
  methods: {
    // 获取项目列表
    getEventList() {
      if (!this.gameId) return;
      const eventQO = {};
      eventQO.CompetitionId = this.gameId;
      eventQO.IncludeEventGroup = true;
      eventQO.IncludeEvent = true;
      eventQO.IncludeGender = true;
      eventQO.IncludeEventType = true;
      eventQO.IncludeRegisterType = true;
      api_GET_EventsManagementCategory(eventQO).then(res => {
        const items = res.items || [];
        // category级排序
        items.sort((a, b) => {
          const _a = a.creationTime;
          const _b = b.creationTime;
          if (_a < _b) { return -1; }
          if (_a > _b) { return 1; }
          return 0;
        });

        this.eventList = items.map(item => {
          // eventGroups级别排序
          item.eventGroups.sort((a, b) => {
            const _a = a.startBirthDate.slice(0, 10);
            const _b = b.startBirthDate.slice(0, 10);
            if (_a === _b) { // 起始出生日期相同
              const _c = a.endBirthDate.slice(0, 10);
              const _d = b.endBirthDate.slice(0, 10);
              if (_c === _d) { // 结束日期也相同
                const _e = a.creationTime;
                const _f = b.creationTime;
                if (_e < _f) { return -1; }
                if (_e > _f) { return 1; }
                return 0;
              } else {
                if (_c > _d) { return -1; }
                if (_c < _d) { return 1; }
                return 0;
              }
            } else {
              if (_a > _b) { return -1; }
              if (_a < _b) { return 1; }
              return 0;
            }
          });
          // eventGroups 下 events 级别排序
          item.eventGroups.forEach(jtem => {
            jtem.events.sort((a, b) => {
              const _a = a.creationTime;
              const _b = b.creationTime;
              if (_a < _b) { return -1; }
              if (_a > _b) { return 1; }
              return 0;
            });
          });
          return item;
        });
      });
    }
  }
};
</script>
<style>
.event_content .van-cell {
  font-size: 12px;
  padding: 4px 8px;
}
.event_content .van-cell__title {
  padding: 0 10px;
  color: #333333;
  font-weight: bold;
}
.event_content .van-collapse-item__title--expanded::after {
  display: none;
}
.event_content .van-collapse-item--border::after {
  display: none;
}
.event_content .van-collapse-item__content {
  font-size: 12px;
  padding: 4px 10px;
  color: #666;
}
.event_content .event_group_item {
  background: #f9f9f9;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
}
.event_group_item .title {
  padding: 2px 0;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
}
.event_content .event_item {
  display: inline-block;
  margin-bottom: 4px;
  margin-right: 5px;
  padding: 1px 3px;
  border-radius: 3px;
  border: 1px solid #415376;
  font-size: 12px;
  color: #415376;
}
.event_content .event_item_name {
  display: inline-block;
  margin-bottom: 2px;
  padding: 4px 0;
}
.event_content .label_name {
  min-width: 48px;
}
.event_content .label_content {
  max-width: calc(100% - 48px);
}
</style>
